<template>
  <div class="pieBack">
    <div id="lineChartC" style="width: 225px; height: 150px;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      myChart: null,
      currentData: null, // 用于展示点击的点的数据
      option: {
        title: {
          // text: '库房状态', // 设置图表的标题
          top: '10%', // 标题的位置
          left: 'center', // 标题水平居中
          textStyle: {
            fontSize: 21, // 标题字体大小
            fontWeight: 'bold' // 标题字体粗细
          }
        },
        tooltip: {
          trigger: 'item', // 触发类型为 item
          formatter: '{b}: {c} ({d}%)' // 显示数据名称、值和百分比
        },
        series: [
          {
            name: '库房状态',
            type: 'pie', // 饼图类型
            radius: ['40%', '70%'], // 内半径和外半径
            avoidLabelOverlap: false,
            label: {
              show: true, // 显示标签
              position: 'inside' // 标签位置在内部
            },
            labelLine: {
              show: false // 不显示连接线
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            data: [
              { value: 620, name: '使用' },
              { value: 1932, name: '未使用' },
            ]
          }
        ]
      }
    };
  },
  mounted() {
    this.initChart(); // 初始化图表
  },
  destroyed() {
    if (this.myChart) {
      this.myChart.dispose(); // 销毁图表实例
    }
  },
  methods: {
    initChart() {
      // 初始化图表
      this.myChart = echarts.init(document.getElementById('lineChartC'));
      this.myChart.setOption(this.option); // 设置图表配置

      // 计算百分比
      const total = 620 + 1932;
      const percentage = (620 / total * 100).toFixed(1); // 计算使用的百分比

      // this.myChart.setOption({
      //   // 使用 graphic 属性来绘制自定义图形元素
      //   graphic: {
      //     type: 'text', // 设置图形类型为文本
      //     left: '50%', // 文本的水平位置，设置为容器宽度的50%（居中）
      //     top: '50%', // 文本的垂直位置，设置为容器高度的50%（居中）
      //     style: {
      //       text: `${percentage}%`, // 显示百分比
      //       fill: '#333', // 字体颜色
      //       font: 'bold 10px sans-serif', // 设置字体大小为10px
      //       textAlign: 'center', // 水平居中对齐
      //       textVerticalAlign: 'middle' // 垂直居中对齐
      //     },
      //     silent: true
      //   }
      // });
      this.myChart.setOption({
        graphic: {
          type: 'text',
          left: '43%',
          top: '45%',
          style: {
            text: `${percentage}%`,
            fill: '#333',
            font: 'bold 12px sans-serif',
            textAlign: 'center',
            textVerticalAlign: 'middle'
          },
          silent: true,
          // 添加偏移量来微调文本位置
          z: 10, // 设置 z-index，确保文本在最上层
          offset: [0, -10] // 手动调整文本的Y轴位置（可以根据需要修改偏移量）
        }
      });




      this.myChart.on('click', (params) => {
        if (params && params.data) {
          this.currentData = params.data; // 更新当前数据显示
        }
      });
    }
  }
};
</script>

<style scoped>
.pieBack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.data-display {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
}
</style>
